import React, { useState } from "react";
import style from "./aside.module.scss";
import { useNavigate } from "react-router-dom";

import {
  AppstoreOutlined,
  CalendarOutlined,
  LinkOutlined,
  MailOutlined,
  SettingOutlined,
} from "@ant-design/icons";
import { Divider, Menu, Space, Switch } from "antd";
function getItem(label, key, icon, children) {
  return {
    key,
    icon,
    children,
    label,
  };
}

const Aside = () => {
  const [mode, setMode] = useState("inline");
  const [theme, setTheme] = useState("light");
  const navigate = useNavigate();
  const changeMode = (value) => {
    setMode(value ? "vertical" : "inline");
  };
  const changeTheme = (value) => {
    setTheme(value ? "dark" : "light");
  };

  let menuList = [
    {
      name: "chat",
      route: "chat",
      icon: "MailOutlined",
      path: "",
      isLeaf: true,
    },
    {
      name: "setting",
      route: "setting",
      icon: "MailOutlined",
      path: "",
      isLeaf: true,
    },
    {
      name: "friend",
      icon: "MailOutlined",
      children: [
        { name: "boy", icon: "MailOutlined", route: "boy" },
        { name: "girl", icon: "MailOutlined", route: "girl" },
      ],
    },
  ];
  let returnMenuItem = (item) => {
    if (item.children) {
      return (
        <Menu.SubMenu title={item.name} key={item.name} icon={<MailOutlined />}>
          {item.children.map(returnMenuItem)}
        </Menu.SubMenu>
      );
    } else {
      return (
        <Menu.Item
          onClick={() => {
            navigate(item.route);
          }}
          key={item.name}
          icon={<MailOutlined />}
        >
          {item.name}
        </Menu.Item>
      );
    }
  };

  return (
    <>
      <div className={style.twoBtn}>
        <Switch onChange={changeMode} /> Change Mode
        <Divider type="vertical" />
        <Switch onChange={changeTheme} /> Change Style
      </div>
      <Menu
        defaultSelectedKeys={["chat"]}
        mode={mode}
        theme={theme}
        defaultOpenKeys={["friend"]}
        className={style.menuStyle}
      >
        {menuList.map(returnMenuItem)}
      </Menu>
    </>
  );
};
export { Aside };
